<template>
  <div :class="['empty-state', `empty-state--${size}`]">
    <!-- 图标区域 -->
    <div class="empty-state__icon">
      <slot name="icon">
        <component
          :is="icon"
          v-if="icon"
          :class="['empty-icon', `empty-icon--${iconType}`]"
        />
        <div v-else-if="illustration" class="empty-illustration">
          <img :alt="title" :src="illustration" />
        </div>
      </slot>
    </div>

    <!-- 内容区域 -->
    <div class="empty-state__content">
      <h3 v-if="title" class="empty-title">{{ title }}</h3>
      <p v-if="description" class="empty-description">{{ description }}</p>

      <!-- 自定义内容插槽 -->
      <div v-if="$slots.content" class="empty-content">
        <slot name="content" />
      </div>
    </div>

    <!-- 操作区域 -->
    <div v-if="$slots.action || primaryAction || secondaryAction" class="empty-state__actions">
      <slot name="action">
        <tiny-button
          v-if="primaryAction"
          :loading="primaryAction.loading"
          :size="actionSize"
          :type="primaryAction.type || 'primary'"
          @click="handlePrimaryAction"
        >
          <component :is="primaryAction.icon" v-if="primaryAction.icon" />
          {{ primaryAction.text }}
        </tiny-button>

        <tiny-button
          v-if="secondaryAction"
          :loading="secondaryAction.loading"
          :size="actionSize"
          :type="secondaryAction.type || 'default'"
          @click="handleSecondaryAction"
        >
          <component :is="secondaryAction.icon" v-if="secondaryAction.icon" />
          {{ secondaryAction.text }}
        </tiny-button>
      </slot>
    </div>

    <!-- 额外信息区域 -->
    <div v-if="$slots.extra" class="empty-state__extra">
      <slot name="extra" />
    </div>
  </div>
</template>

<script lang="ts" setup>
// Props
interface Action {
  text: string
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'
  icon?: string
  loading?: boolean
  handler?: () => void
}

interface Props {
  title?: string
  description?: string
  icon?: string
  iconType?: 'default' | 'success' | 'warning' | 'error' | 'info'
  illustration?: string
  size?: 'small' | 'medium' | 'large'
  primaryAction?: Action
  secondaryAction?: Action
}

const props = withDefaults(defineProps<Props>(), {
  iconType: 'default',
  size: 'medium'
})

// Emits
const emit = defineEmits<{
  'primary-action': []
  'secondary-action': []
}>()

// 计算属性
const actionSize = computed(() => {
  const sizeMap = {
    small: 'mini',
    medium: 'small',
    large: 'medium'
  }
  return sizeMap[props.size]
})

// 事件处理
const handlePrimaryAction = () => {
  if (props.primaryAction?.handler) {
    props.primaryAction.handler()
  } else {
    emit('primary-action')
  }
}

const handleSecondaryAction = () => {
  if (props.secondaryAction?.handler) {
    props.secondaryAction.handler()
  } else {
    emit('secondary-action')
  }
}
</script>

<script lang="ts">
import { computed } from 'vue'
export default {
  name: 'EmptyState'
}
</script>

<style lang="scss" scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: $gray-500;

  &--small {
    padding: $spacing-8 $spacing-4;

    .empty-state__icon {
      margin-bottom: $spacing-4;

      .empty-icon {
        font-size: 48px;
      }
    }

    .empty-title {
      font-size: $text-base;
      margin-bottom: $spacing-2;
    }

    .empty-description {
      font-size: $text-sm;
      margin-bottom: $spacing-4;
    }
  }

  &--medium {
    padding: $spacing-12 $spacing-4;

    .empty-state__icon {
      margin-bottom: $spacing-6;

      .empty-icon {
        font-size: 64px;
      }
    }

    .empty-title {
      font-size: $text-lg;
      margin-bottom: $spacing-3;
    }

    .empty-description {
      font-size: $text-base;
      margin-bottom: $spacing-6;
    }
  }

  &--large {
    padding: $spacing-16 $spacing-4;

    .empty-state__icon {
      margin-bottom: $spacing-8;

      .empty-icon {
        font-size: 80px;
      }
    }

    .empty-title {
      font-size: $text-xl;
      margin-bottom: $spacing-4;
    }

    .empty-description {
      font-size: $text-lg;
      margin-bottom: $spacing-8;
    }
  }

  .empty-state__icon {
    .empty-icon {
      opacity: 0.6;
      transition: opacity $duration-normal ease;

      &--default {
        color: $gray-400;
      }

      &--success {
        color: $success-500;
      }

      &--warning {
        color: $warning-500;
      }

      &--error {
        color: $error-500;
      }

      &--info {
        color: $info-500;
      }
    }

    .empty-illustration {
      img {
        max-width: 100%;
        height: auto;
        opacity: 0.8;
      }
    }
  }

  .empty-state__content {
    max-width: 400px;

    .empty-title {
      font-weight: $font-semibold;
      color: $gray-700;
      margin: 0;
    }

    .empty-description {
      color: $gray-500;
      line-height: $leading-relaxed;
      margin: 0;
    }

    .empty-content {
      margin-top: $spacing-4;
    }
  }

  .empty-state__actions {
    display: flex;
    gap: $spacing-3;
    flex-wrap: wrap;
    justify-content: center;
  }

  .empty-state__extra {
    margin-top: $spacing-6;
    color: $gray-400;
    font-size: $text-sm;
  }

  // 悬停效果
  &:hover {
    .empty-state__icon .empty-icon {
      opacity: 0.8;
    }
  }
}

// 暗色主题
[data-theme="dark"] {
  .empty-state {
    color: $dark-600;

    .empty-state__content {
      .empty-title {
        color: $dark-800;
      }

      .empty-description {
        color: $dark-600;
      }
    }

    .empty-state__extra {
      color: $dark-500;
    }

    .empty-state__icon {
      .empty-icon {
        &--default {
          color: $dark-500;
        }
      }
    }
  }
}
</style>
